<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
  <script src="https://unpkg.com/vue"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    /* 
      1. 能不能获取到vue实例
      2. 能不能获取到data数据
      3. 获取到改变前/后的data数据
      4. 页面显没显示内容
      5. 页面显示修改前/后的内容
    */
    const app = Vue.createApp({
      template: '<div>Hello World-{{count}}</div>',
      data() {
        return {
          count: 1
        }
      },
      beforeUpdate() {
        // data中的数据发生变化之前会自动执行
        console.log('beforeUpdate', document.getElementById('root').innerHTML);
      },
      updated() {
        // data中的数据发生变化 ，同时页面完成更新后自动执行
        console.log('updated', document.getElementById('root').innerHTML);
      },
      beforeUnmount() {
        // 组件销毁之前，自动执行
        console.log('beforeUnmount', document.getElementById('root').innerHTML);
      },
      unmounted() {
        // 组件销毁之后且dom销毁之后自动执行
        console.log('unmounted', document.getElementById('root').innerHTML);
      },
    })
    const vm = app.mount('#root');
  </script>
</body>

</html>